<template>
	<view class="container">
		<!-- 点击事件 =事件处理函数 -->
		<!-- <button @click="toUrl()">跳转到test页面</button> -->
		<!-- uswiper+tab -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="pink"
			style="height: 300px;">
			<swiper-item v-for="item in swiperImageList">
				<view class="swiper-item">
					<!-- uimage -->

					<!-- 注意：单双引号拼接 原则：外双内单 "''+''"  就近原则 会寻找最近的相同引号-->
					<image :src="item.iurl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="box" @click="toProduct">
			<view>
				<image src="../../static/mendian.png"></image>
				<view class="title">门店自取</view>
				<view class="content">点单无需排队</view>
			</view>
			<view>
				<image src="../../static/waimai.png"></image>
				<view class="title">外卖</view>
				<view class="content">配送到家</view>
			</view>
		</view>
		<view class="info">
			<view>
				<view class="info-title">积分商城</view>
				<view class="info-text">点击了解详情》</view>
				<image src="../../static/sc.png"></image>
			</view>
			<view>
				<view class="info-title">积分签到</view>
				<view class="info-text">点击了解详情》</view>
				<image src="../../static/qd.png"></image>
			</view>
			<view>
				<view class="info-title">我的优惠券</view>
				<view class="info-text">点击了解详情》</view>
				<image src="../../static/yhj.png"></image>
			</view>
		</view>

	</view>

	</view>
</template>

<script>
	import {
		queryImageByType
	} from "@/api/index";

	//Vue中核心概念  以数据作为驱动 页面效果展示和隐藏  js、jquery通过DOM节点操作 Vue通过变量操作

	export default {
		data() {
			return {
				title: 'Hello',
				swiperImageList: [{
					iurl: "http://47.96.80.123:8000/img/i4.png"
				}, ]
			}
		},
		// 生命周期回调监听页面加载
		// 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
		onLoad() {},
		// 生命周期回调监听应用显示
		// 应用启动，或从后台进入前台显示时触发

		//离开当前页面再次进入会重新触发该方法
		onShow() {
			this.getBannerList()
		},
		methods: {
			getCarouselList() {
				getCarouselQueryPage({}).then(res => {
					this.carouselList = res.data.list
				})
			},
			toUrl() {
				uni.navigateTo({
					url: "/pages/test/test?text=我是从index页面传递过来的123&id=999"
				})
			},
			//定义获取轮播API接口方法
			getBannerList() {
				queryImageByType(2).then(res => {
					console.log(res.data)
					this.swiperImageList = res.data
				})

			},
			//跳转到产品列表页
			toProduct() {
				uni.switchTab({
					url: "/pages/product/product"
				})
			}

		}
	}
</script>
<!-- scoped 表示css样式只在局部生效 当前页面 -->
<style scoped>
	.swiper-item {
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.container {
		background-color: #f5f5f5;
	}

	.box {
		display: flex;
		justify-content: space-around;
		margin: 30px 10px;
		background-color: #fff;
		/* 圆角矩形 */
		border-radius: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.box image {
		width: 100px;
		height: 100px;
	}

	.box>view view {
		text-align: center;
	}

	.title {
		font-weight: bold;
		font-size: 23px;
		margin-bottom: 5px;
	}

	.content {
		color: #ccc;
	}



	.info {
		/* 使用弹性盒模型布局 */
		display: flex;
		/* 设置主轴对齐方式 */
		justify-content: space-around;

	}

	.info view {
		/* 文本水平居中 */
		text-align: center;

	}

	.info image {
		width: 70px;
		height: 70px;
	}

	.info>view {
		line-height: 35px;
		background: pink;
		/* 给.info类下面的标签设置样式 */
		padding: 20px;
	}

	/* nth-child用来选择元素 */
	.info>view:nth-child(1) {
		background: #f5f6fa;
	}

	.info>view:nth-child(2) {
		background: #fdf7eb;
	}

	.info>view:nth-child(3) {
		background: rgb(242, 246, 229);
	}

	.info-title {
		font-weight: bold;
		font-size: 19px;
	}

	.info-text {
		color: #ccc;
		font-size: 13px;
		margin-bottom: 5px;
	}
</style>